<template>
  <div>
    <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
          <div class="updateinfo">
          <div class="left">
              <el-form-item label="头像" prop="avatar">
                <div class="file-upload-container" id="fileUploadContainer">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="form.avatar" class="form.avatar" :style="{ width: '100px', height: '100px', objectFit: 'contain' }">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-switch
                  v-model="form.sex"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="男"
                  inactive-text="女"
                  :active-value= "1"
                  :inactive-value= "0"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="地区" prop="area">
                <el-input v-model="form.area"></el-input>
              </el-form-item>
              <el-form-item label="兴趣爱好" prop="hobby">
                <el-input v-model="form.hobby"></el-input>
              </el-form-item>
              <el-form-item label="职业" prop="work">
                <el-input v-model="form.work"></el-input>
              </el-form-item>
              <el-form-item label="个性签名" prop="design">
                <el-input v-model="form.design"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobilePhoneNumber">
                <el-input v-model="form.mobilePhoneNumber"></el-input>
              </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
        <el-button @click="handleClose" style="width: 220px;margin-right: 80px;">取 消</el-button>
        <el-button type="primary" style="width: 220px;">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
  export default {
    name: "PersonalDia",
    data() {
      return {
        selectedImage: null,
        imageUrl: '',
        dialogVisible: false,
        form: {
          avatar: "",
          nickname: "",
          age: 0,
          email: "",
          mobilePhoneNumber: "",
          sex: 0,
          area: "",
          hobby: "",
          work: "",
          design: "",
        },
        rules: {
          // nickname: [
          //   { required: true, message: "昵称不能为空", trigger: "blur" },
          // ],
        },
      };
    },

    methods: {
      open() {
        this.dialogVisible = true;
      },
      
      handleClose() {
        this.dialogVisible = false;
        this.$emit("flesh");
      },
    handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        // 创建一个 FileReader 对象来读取文件内容
        const reader = new FileReader();
        reader.onload = () => {
          // 将读取到的图片数据赋值给 selectedImage
          this.selectedImage = reader.result;
        };
        reader.readAsDataURL(file);
      } else {
        this.selectedImage = null;
      }

        // 将DataURL转换为Blob对象
        const blob = new Blob([this.selectedImage], { type: 'image/jpeg' });
        const imageUrl = URL.createObjectURL(blob);
        console.log(imageUrl);
    },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form.avatar = this.imageUrl;
        console.log("imageUrl:",this.form.avatar);
        console.log("avatar:",this.form.avatar);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    },
  };
  </script>
  
  <style scoped>
  .updateinfo {
    height: 350px;
    overflow: auto;
  }
  .form-item{
    height: 50px;
  }
  .el-dialog{
    height: 1000px;
  }

  .el-dialog__headerbtn{
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(10px, -30px);
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  